<template>
  <div class="comprehensive-enumerate-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <el-tabs class="tabs-container" type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="材料管理" name="1">
          <div class="btn-container">
            <el-button v-if="hasTabAdd" type="primary" @click="handleAdd">新建</el-button>
            <el-button v-if="hasTabDelete" type="danger" @click="handleDeleteAll">删除</el-button>
          </div>
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            @selection-change="handleSelectionChange"
            row-key="id">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.materialTypeModels || []"
                  :max-height="$setRem(300)"
                  row-key="id">
                  <el-table-column label="规格名称" prop="modelName" align="center"></el-table-column>
                  <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                  <div class="empty-content" slot="empty">
                    <i class="iconfont iconwushuju"></i>
                    <p>暂无数据</p>
                  </div>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
            <el-table-column label="材料名称" prop="materialName" align="center"></el-table-column>
            <el-table-column label="单位" prop="unit" align="center"></el-table-column>
            <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span style="display: none;"></span>
                <span v-if="hasTableEdit" class="btn" @click="handleEdit(scope.row)">编辑</span>
                <span v-if="hasTableSet" class="btn" @click="handleSet(scope.row)">规格设置</span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </main>
    <add-material-type
      :visible="visible"
      :options="currentData"
      :type="type"
      :loading="loading"
      @cancel="visible = false"
      @submit="handleSave">
    </add-material-type>
    <add-enumerate
      :visible="addVisible"
      :options="currentAddData"
      :loading="addLoading"
      @cancel="addVisible = false"
      @submit="handleSubmit">
    </add-enumerate>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import AddMaterialType from '@/components/project/comprehensive/addMaterialType';
import AddEnumerate from '@/components/project/comprehensive/addEnumerate';

export default {
  data() {
    return {
      breadcrumbData: [
        { name: '项目管理' },
        { name: '枚举管理' }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      activeName: '1',
      multipleSelection: [],
      visible: false,
      materialId: '',
      type: 'add',
      currentData: {},
      loading: false,
      addLoading: false,
      addVisible: false,
      currentAddData: {}
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  created() {
    this.getData();
  },
  components: {
    AddMaterialType,
    AddEnumerate,
    Breadcrumb,
  },
  methods: {
    getData() {
      switch (this.activeName) {
        case '1': this.getTableData(); break;
        default: break;
      }
    },
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId
      };
      const { success, data: {
        data
      }} = await this.$Model.getStockTypeList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    handleClick(e) {
      this.activeName = e.name;
      this.clear();
      this.getData();
    },
    // 新建
    handleAdd() {
      this.type = 'add';
      this.materialId = '';
      this.currentData = {};
      this.visible = true;
    },
    handleEdit(row) {
      this.type = 'edit';
      this.currentData = { ...row };
      this.materialId = row.id;
      this.visible = true;
    },
    handleSet(row) {
      this.currentAddData = { ...row };
      this.addVisible = true;
    },
    // 批量删除
    handleDeleteAll(row) {
      if (!this.multipleSelection.length) {
        return this.$message.warning('请勾选选项');
      }
      this.$confirm('此操作将批量删除数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delStockType({
          ids: this.multipleSelection.map(v => v.id).join(',')
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
      this.multipleSelection = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async handleSave(data) {
      const params = {
        ...this.currentData,
        ...data,
        projectId: this.projectId
      };
      this.loading = true;
      if (this.type === 'add') delete params.id;
      const { success } = this.type === 'add'
        ? await this.$Model.addStockType(params)
        : await this.$Model.updateStockType(params);
      this.loading = false;
      if (success) {
        this.getTableData();
        this.$message.success('保存成功');
        this.visible = false;
      }
    },
    async handleSubmit({ addData, deleteData }) {
      const reqList = [];
      addData.length && reqList.push(this.$Model.addStockTypeModel(addData));
      deleteData.length && reqList.push(this.$Model.delStockTypeMode1l({
        ids: deleteData
          .filter(v => v.id)
          .map(v => v.id)
          .join(',')
      }));
      this.addLoading = true;
      const result = await Promise.all(reqList);
      this.addLoading = false;
      const hasFail = result.some(v => !v.success);
      if (!hasFail) {
        deleteData.length && this.clear();
        this.getTableData();
        this.$message.success('保存成功');
        this.addVisible = false;
      }
    }
  },
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .comprehensive-enumerate-page {
    width: 100%;
    height: 100%;
    background-color: $mainBg;
    main {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
      .btn-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
        .search-btn {
          margin-left: 20px;
        }
      }
      .table-container {
        height: calc(100% - 100px);
        /deep/ .el-table__body-wrapper {
          height: calc(100% - 50px);
          padding-bottom: 46px;
          overflow-y: auto;
          .btn {
            padding: 0 5px;
            cursor: pointer;
            color: $mainColor;
          }
          .img {
            width: 60px;
            height: 60px;
          }
          .file-name {
            height: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
        /deep/ .el-table__header {
          th.is-leaf .el-button span {
            color: #fff;
          }
        }
      }
      .tabs-container {
        height: 100%;
        /deep/ .el-tabs__content {
          height: calc(100% - 50px);
          .el-tab-pane {
            height: 100%;
          }
        }
        /deep/ .el-tabs__item {
          color: #fff;
          &.is-active {
            color: $mainColor;
          }
          &:focus.is-active.is-focus:not(:active) {
            box-shadow: 0 0 2px 2px $mainColor inset;
            border-radius: 3px
          }
        }
      }
    }
  }
</style>
